<template>
  <div class="container">
    <div class="topSearch card-search">
      <el-form :inline="true" :model="formInline" key="1" class="demo-form-inline">
        <el-form-item label="产品类型">
          <el-select size="small" v-model="formInline.typesProductType" clearable>
            <!-- 这个options得掉接口 -->
            <el-option
              v-for="item in optionProductType"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="规格型号">
          <el-select size="small" v-model="formInline.types" clearable>
            <!-- 这个options得掉接口 -->
            <el-option
              v-for="item in optionssearch"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="直径规格">
          <el-select size="small" v-model="formInline.typesDiameter" clearable>
            <el-option
              v-for="item in optionDiameters"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button  type="primary" @click="getMachineData">查询</el-button>
        </el-form-item>
      </el-form>
      <!-- <div class="btnAdd">
        <el-button icon="el-icon-plus" type="primary" @click="addWorkOrder">增加</el-button>
      </div> -->
    </div>
    <tableContent :tabledata="this.TABLEdata">
      <!-- <el-table-column
        slot="status"
        label="状态"
        align="center">
        <template slot-scope="scope">
          <el-tag size="medium" :type="scope.row.status === '已出炉' ? 'success' : 'primary'">{{scope.row.status}}</el-tag>
        </template>
      </el-table-column> -->
      <el-table-column
        slot="operation"
        label="操作"
        align="center">
        <template slot-scope="scope">
            <!-- <el-button type="text" class="btnText" size="small" @click="outOven(scope.row)">出炉</el-button> -->
            <!-- <el-button type="text" class="btnText" size="small" @click="editFrom(scope.row)">编辑</el-button> -->
            <!-- <el-button type="text" class="btnText" size="small" @click="detail(scope.row)">详情</el-button> -->
            <el-button type="text" class="btnText" size="small" @click="checkByOrder(scope.row)">质检</el-button>
        </template>
      </el-table-column>
    </tableContent>
    <div
      class="block"
      style="display: flex; flex-direction: row-reverse; margin-top: 10px; padding-right: 10px"
    >
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currPage"
        :page-sizes="[10, 20, 30]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- <el-dialog class="dail" width="74%" :title="dialogTitle" :visible.sync="addEditDialogTableVisible" :modal-append-to-body="false">
      <el-divider></el-divider>
      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForms" label-width="100px" class="demo-dynamic">
        <el-form-item class="groupsInput" label="规格型号" prop="specification">
          <el-select
              v-model="ruleForm.specification"
              :disabled="inputOven"
              clearable>
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
          </el-select>
          <el-input class="inp" placeholder="请输入规格型号" v-if="ruleForm.specification === '其他'" v-model="inputType"></el-input>
        </el-form-item>
        <el-form-item label="产品类型" prop="productType">
          <el-select
              v-model="ruleForm.productType"
              :disabled="inputOven"
              clearable>
                <el-option
                  v-for="item in optionProductType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="groupsInput" label="直径规格" prop="diameterSpecification">
          <el-select
              v-model="ruleForm.diameterSpecification"
              :disabled="inputOven"
              clearable>
                <el-option
                  v-for="item in optionDiameter"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
          </el-select>
          <el-input class="inp" placeholder="请输入直径规格" v-if="ruleForm.diameterSpecification === '其他'" v-model="inputDiameterType"></el-input>
        </el-form-item>
        <el-form-item label="起始编号" prop="startNumber">
          <el-input :disabled="numberAble" oninput="value=value.replace(/[^0-9.]/g,'')" v-model="ruleForm.startNumber"></el-input>
        </el-form-item>
        <el-form-item label="结束编号" prop="endNumber">
          <el-input :disabled="numberAble" oninput="value=value.replace(/[^0-9.]/g,'')" v-model="ruleForm.endNumber"></el-input>
        </el-form-item>
        <el-form-item label="焦配比说明" prop="cokeRatio">
          <el-input :disabled="inputOven" type="textarea" v-model="ruleForm.cokeRatio"></el-input>
        </el-form-item>
        <el-form-item v-if="inputOven" label="出炉时间" prop="outOvenTime">
          <div class="dateClass">
            <el-form-item prop="dateDay">
              <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.dateDay" style="width: 70%;"></el-date-picker>
            </el-form-item>
            <div class="line">-</div>
            <el-form-item prop="dateTime">
              <el-time-picker placeholder="选择时间" v-model="ruleForm.dateTime" style="width: 70%;"></el-time-picker>
            </el-form-item>
          </div>
        </el-form-item>
        <el-form-item class="btnflex">
          <el-button type="primary" @click="submitForm('ruleForms')">提交</el-button>
          <el-button @click="cancelForm">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog> -->
  </div>
</template>

<script>
import { profileCreate, profileGetData, profileEdit } from '@/api/profileApi/profileOrder.js'
import tableContent from '@/components/tableContent/index.vue'
import { mapGetters } from 'vuex'
export default {
  name: 'profileWorkOrder',
  components: {
    tableContent
  },
  data () {
    return {
      TABLEdata: {
        formHead: [],
        tableAllData: []
      },
      formInline: {
        typesProductType: '',
        types: '',
        typesDiameter: ''
      },
      ruleForm: {},
      rules: {
        specification: [
          { required: true, message: '请选择设备型号', trigger: 'blur' }
        ],
        productType: [
          { required: true, message: '请选择产品类型', trigger: 'blur' }
        ],
        startNumber: [
          { required: true, message: '请填写起始编号', trigger: 'blur' }
        ],
        endNumber: [
          { required: true, message: '请填写结束编号', trigger: 'blur' }
        ],
        diameterSpecification: [
          { required: true, message: '请选择直径规格', trigger: 'blur' }
        ],
        dateDay: [
          { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        ],
        dateTime: [
          { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
        ],
        cokeRatio: [
          { required: true, message: '请填写焦配比说明', trigger: 'blur' }
        ]
      },
      addEditDialogTableVisible: false,
      dialogTitle: '',
      inputOven: false,
      numberAble: true,
      datePicker: '',
      optionProductType: [
        {
          label: '石墨电极',
          value: '石墨电极'
        },
        {
          label: '接头',
          value: '接头'
        },
        {
          label: '方子',
          value: '方子'
        }
      ],
      options: [
        {
          label: 'HP',
          value: 'HP'
        },
        {
          label: 'RP',
          value: 'RP'
        },
        {
          label: 'IP',
          value: 'IP'
        },
        {
          label: 'UHP',
          value: 'UHP'
        },
        {
          label: 'SHP',
          value: 'SHP'
        },
        {
          label: '其他',
          value: '其他'
        }
      ], // 调获取规格类型接口
      optionssearch: [
        {
          label: 'HP',
          value: 'HP'
        },
        {
          label: 'RP',
          value: 'RP'
        },
        {
          label: 'IP',
          value: 'IP'
        },
        {
          label: 'UHP',
          value: 'UHP'
        },
        {
          label: 'SHP',
          value: 'SHP'
        }
      ],
      optionDiameter: [
        {
          label: 'φ500',
          value: 'φ500'
        },
        {
          label: 'φ400',
          value: 'φ400'
        },
        {
          label: 'φ300',
          value: 'φ300'
        },
        {
          label: '其他',
          value: '其他'
        }
      ],
      optionDiameters: [
        {
          label: 'φ500',
          value: 'φ500'
        },
        {
          label: 'φ400',
          value: 'φ400'
        },
        {
          label: 'φ300',
          value: 'φ300'
        }
      ],
      inputType: '', // 自定义规格型号
      inputDiameterType: '',
      operations: '',
      pageSize: 10,
      currPage: 1,
      total: 50
    }
  },
  props: {
  },
  computed: {
    ...mapGetters({
      getUserInfos: 'getUserInfo'
    })
  },
  created () {
    this.getMachineData()
  },
  mounted () {
  },
  methods: {
    getRowClass ({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'color: rgb(63,66,84);font-weight: bold;font-size: 14px'
      } else {
        return ''
      }
    },
    // outOven (row) {
    //   console.log(row)
    //   this.dialogTitle = '出炉工单'
    //   this.operations = 'out'
    //   this.inputOven = true
    //   this.numberAble = true
    //   this.addEditDialogTableVisible = true
    //   this.ruleForm = row
    // },
    checkByOrder (row) {
      console.log('按工单质检', row)
      var arg = JSON.stringify({
        createTime: row.createTime,
        productType: row.productType,
        diameterSpecification: row.diameterSpecification,
        specification: row.specification
      })
      this.$router.push({
        name: 'qualityItem',
        query: {
          orderId: row._id,
          type: 'checkByorders',
          mes: arg
        }
      })
    },
    // editFrom (row) {
    //   this.dialogTitle = '编辑成型工单'
    //   this.inputOven = false
    //   this.operations = 'out'
    //   this.addEditDialogTableVisible = true
    //   this.numberAble = true
    //   this.ruleForm = row
    // },
    // addWorkOrder () {
    //   this.dialogTitle = '新增成型工单'
    //   this.operations = 'add'
    //   this.inputOven = false
    //   this.numberAble = false
    //   this.ruleForm = {}
    //   this.addEditDialogTableVisible = true
    // },
    submitForm (formName) {
      this.$nextTick(
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.operations === 'add') {
            // this.ruleForm.state = '待出炉'
              this.ruleForm.writeMan = this.getWriteMan() // 质检人
              if (this.ruleForm.diameterSpecification === '其他') {
                this.ruleForm.diameterSpecification = this.inputDiameterType
              }
              if (this.ruleForm.specification === '其他') {
                this.ruleForm.specification = this.inputType
              }
              console.log('增加的ruleForm', this.ruleForm)
              profileCreate(this.ruleForm).then(res => {
                console.log('创建设备类型', res.data)
                if (res.data.code === 200) {
                  this.$message({
                    showClose: true,
                    message: '创建成功',
                    type: 'success'
                  })
                } else {
                  this.$message({
                    message: '创建失败',
                    type: 'warning'
                  })
                }
                this.getMachineData()
                this.addEditDialogTableVisible = false
              })
            } else {
              this.ruleForm.writeMan = this.getWriteMan() // 质检人
              if (this.ruleForm.diameterSpecification === '其他') {
                this.ruleForm.diameterSpecification = this.inputDiameterType
              }
              if (this.ruleForm.specification === '其他') {
                this.ruleForm.specification = this.inputType
              }
              console.log('编辑的ruleForm', this.ruleForm)
              profileEdit(this.ruleForm).then(res => {
                console.log('编辑成功没', res.data)
                if (res.data.code === 200) {
                  this.$message({
                    showClose: true,
                    message: '编辑成功',
                    type: 'success'
                  })
                } else {
                  this.$message({
                    message: '编辑失败',
                    type: 'warning'
                  })
                }
                this.getMachineData()
                this.addEditDialogTableVisible = false
              })
            }
          } else {
            console.log('error submit!!')
            return false
          }
        })
      )
    },
    getWriteMan () {
      var names = this.getUserInfos.username
      return names
    },
    // cancelForm () {
    //   this.ruleForm = {}
    //   this.inputType = ''
    //   this.inputDiameterType = ''
    //   this.addEditDialogTableVisible = false
    // },
    getMachineData () {
      // this.$http.get('http://20211129Mock.com/tableData/profileWorkOrder').then(res => {
      const params = {
        pageSize: this.pageSize,
        currPage: this.currPage,
        diameterSpecification: this.typesDiameter,
        productType: this.typesProductType,
        where: '',
        specification: this.formInline.types
      }
      profileGetData(params).then(res => {
        if (res.data.code === 200) {
          console.log('+++++', res.data.data)
          delete res.data.data.formHead.cokeRatio
          delete res.data.data.formHead.checkStatus
          delete res.data.data.formHead.writeMan
          var arr = []
          for (var i in res.data.data.formHead) {
            var o = {}
            o[i] = res.data.data.formHead[i]
            arr.push(o)
          }
          console.log('arr', arr)
          this.TABLEdata.formHead = arr
          var tableBody = JSON.parse(JSON.stringify(res.data.data.data))
          tableBody.forEach((item) => {
            if (item.createTime.length === 19) {
              item.createTime = item.createTime.substring(5, 16)
            }
          })
          this.TABLEdata.tableAllData = tableBody
          this.total = res.data.data.totalCount
        }
      })
    },
    handleSizeChange (val) {
      this.pageSize = val
      this.getMachineData()
    },
    handleCurrentChange (val) {
      this.currPage = val
      this.getMachineData()
    }
  }
}
</script>

<style  scoped>
.container {
  .topSearch {
    background-color: #fff;
    padding: 15px 20px -5px 30px;
    box-sizing: border-box;
    margin-bottom: 3px;
    display: flex;
    justify-content: space-between;
    .btnAdd {
      padding: 5px 3px 10px 1px;
    }
  }
  .btnText {
    color: $primary;
  }
  .dail {
     .el-dialog__body {
      padding-top: 10px !important;
    }
     .el-divider--horizontal {
      margin: 0 0 28px 0;
    }
    .groupsInput {
       .el-form-item__content {
        display: flex;
        .inp {
          .el-input__inner {
            width: 40%;
            margin-left: 20px;
          }
        }
      }
    }
    .btnflex {
      display: flex;
      justify-content: flex-end;
       .el-form-item__content {
        margin-right: 10px;
        .el-button {
          margin-left: 40px;
        }
      }
    }
    .dateClass {
      display: flex;
      .line {
        margin-left: -40px;
        font-weight: bold;
        width: 30px;
      }
    }
  }
}
</style>
